<template>
  <button ref="backRef" :class="row.selected ? 'selected' : ''">
    <el-tooltip placement="top" :show-after="200">
      <template #content>{{ row.title }}</template
      >
      <font-awesome-icon style="outline: 0" :icon="['fa', row.icon]" />
    </el-tooltip>
  </button>
</template>
<script lang="ts" >
import { getCurrentInstance, onMounted, reactive, ref ,defineComponent,toRefs, watchEffect } from "vue";
import { EditorContent, useEditor } from "@tiptap/vue-3";
import Pickr from "@simonwep/pickr";
import "@simonwep/pickr/dist/themes/monolith.min.css";

export default defineComponent({
  props: {
    row: {
      type: Object,
      default: () => {},
    },
    editor: {
      type: Object,
      default: () => {},
    },
  },
  name: "backColor",
  components: { EditorContent },
  setup(props, { emit }) {
    const state = reactive({
      color: "",
      picker: null,
    });
    const { proxy } = getCurrentInstance() as any;

    onMounted(() => {
      // 创建颜色选择器
      state.picker = new Pickr({
        el: proxy.$refs.backRef,
        theme: "monolith",
        useAsButton: true,
        swatches: ["#ffffff","#333333", "#666666", "#9999999", "#673AB7"],
        components: {
          preview: true,
          hue: true,
          interaction: {
            input: true,
            save: true,
          },
        },
        i18n: { "btn:save": "确认" },
      });

      // 保存颜色设置
      state.picker.on("save", (color, instance) => {
        instance.hide();
        const hexValue = color.toHEXA().toString();
        console.log("字体颜色=============", hexValue);
        state.color = hexValue;
        props.editor.chain().focus().setColor(hexValue).run();
      });




    });

    return {
      ...toRefs(state),
    };
  },
});
</script>
